<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <style type="text/css">
    .error {
      background-color: red;
    }

    .warning {
      background-color: yellow;
    }
    </style>
  </head>
  <body>
    <div ng-controller='HeaderController'>

      <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>

      <button ng-click='showError()'>Simulate Error</button>
      <button ng-click='showWarning()'>Simulate Warning</button>
    </div>
    <script>
      function HeaderController($scope) {
        $scope.isError = false;
        $scope.isWarning = false;

        $scope.showError = function() {
          $scope.messageText = 'This is an error!';
          $scope.isError = true;
          $scope.isWarning = false;
        };

        $scope.showWarning = function() {
          $scope.messageText = 'Just a warning.  Please carry on.';
          $scope.isWarning = true;
          $scope.isError = false;
        };
      }
    </script>
  </body>
</html>
